<template>
    <div class="sign-all" :style="{minHeight: minH + 'px'}">
        <div class="main-view">
            <img :src="alllist.teacher_img" alt="">
            <div class="title">
              <span>{{alllist.title}}</span>
              <span>{{alllist.intro}}</span>
            </div>
        </div>
      <div class="main-num">
        <p class="sign-title">
          <span>请选择参加人</span>
          <span>已选择 {{num}} 人</span>
        </p>
        <ul>
          <li :class="{active: i.isshow}" v-for="(i, index) in items" :key="index" @click="addCol(index)">{{i.customer}} <img src="../../assets/school/gou.png" alt="" v-show="i.isshow"></li>
        </ul>
        <div class="clear"></div>
        <div class="sign-view" v-for="(i, index) in items" :key="index" v-show="i.isshow">
          <i class="iconfont icon-jianhao" @click="addCol(index)"></i>
          <div class="v-img" style="background: #f8d8a5" v-if="index === 0">我</div>
          <div class="v-img" v-else>他人</div>
          <p class="v-name">
            <span>{{i.customer}}</span><br/>
            <span style="color: #999999">{{i.phone}}</span>
          </p>
          <p class="look" @click="addLook(index, i.id)">查看</p>
        </div>
        <div class="main-btn" @click="addNum"><i class="iconfont icon-jiahao"></i> 新增参加人</div>
        <div class="s-foot">人数过半即众筹成功，余款再封团后3天支付，若不成功，预定金原路足额返还。</div>
        <div class="tips">侃侃电商学院</div>
        <div class="feedback" @click="gofeed">问题反馈</div>
        <!--底部-->
        <div>
          <div class="tab-ber-bottom" @click.stop></div>
          <div class="tab-ber" @click.stop>
            <div class="tab-ber-once" @click="tocurrent(0)">
              预定金：￥{{alllist.price * num}}
            </div>
            <div class="tab-ber-once tab-once" @click="goOrder">
              <span>去支付</span>
            </div>
          </div>
        </div>
        <!--新增参加人-->
        <div class="main-new" v-show="isAdd">
          <div class="main-new-one">
            <p class="title">{{title}}</p>
            <p class="main-inp">
              <span>姓名：</span>
              <input type="text" placeholder="请输入姓名" v-model="message.customer">
              <i class="iconfont icon-cha1" v-show="message.customer !== ''"></i>
            </p>
            <div style="height: 8px"></div>
            <p class="main-inp">
              <span>手机：</span>
              <input type="text" placeholder="用于联系您" v-model="message.phone">
              <i class="iconfont icon-cha1" v-show="message.phone !== ''"></i>
            </p>
            <div style="height: 8px"></div>
            <p class="main-inp">
              <span>公司：</span>
              <input type="text" placeholder="请输入公司简称" v-model="message.company">
              <i class="iconfont icon-cha1" v-show="message.company !== ''"></i>
            </p>
            <div style="height: 8px"></div>
            <p class="main-inp">
              <span>职位：</span>
              <input type="text" placeholder="请输入职位（选填）" v-model="message.position">
              <i class="iconfont icon-cha1" v-show="message.position !== ''"></i>
            </p>
            <div class="new-btn new-btn-1" v-if="title === '查看参加人'">
              <span @click="del">删除</span>
              <span @click="close">取消</span>
              <span @click="edit">确认</span>
            </div>
            <div class="new-btn" v-else>
              <span @click="close">取消</span>
              <span @click="edit" v-if="id === fid">确认</span>
              <span @click="sure" v-else>确认</span>
            </div>
          </div>
        </div>
        <!--支付-->
        <div class="main-kefu" v-show="isKefu">
          <div class="main-more">
            <p class="title">
              <span>请选择支付方式</span><br/>
              <span>人数过半即众筹成功，余款在封团后3天内支付。 若不成功，预订金原路足额返还。</span>
              <span class="iconfont icon-untitled94" @click="aloseSel"></span>
            </p>
            <p class="mimg"><img src="../../assets/school/puyweixin.png" alt=""><span class="iconfont icon-gou"></span></p>
            <p class="mbtn" @click="addPay">确认支付￥{{alllist.price * num}}</p>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { Toast, MessageBox } from 'mint-ui'
import g from '../../common/g'
import msgbox from '../../common/msgbox'
export default {
  name: 'signup',
  data () {
    return {
      colIndex: {},
      title: '修改"我"的报名信息',
      isAdd: false,
      isKefu: false,
      id: '',
      orderno: '',
      fid: 0,
      minH: '',
      message: {
        customer: '',
        phone: '',
        company: '',
        position: ''
      },
      items: [],
      allmsg: [],
      alllist: {},
      num: ''
    }
  },
  watch: {
    isKefu () {
      if (this.isKefu === true) {
        document.body.setAttribute('id', 'bodystyle')
      } else {
        document.body.removeAttribute('id', 'bodystyle')
      }
    }
  },
  mounted () {
    this.minH = window.screen.height - 48
    this.getUser()
    this.getinfo()
  },
  methods: {
    addPay () {
      let that = this
      let price = this.alllist.price * this.num
      g.ajax({
        path: 'courseordersubs/pay/' + that.orderno,
        methods: 'post',
        cbSuccess (res) {
          /* eslint-disable no-undef */
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
              'appId': 'wx4999af4af069bec3',
              'timeStamp': res.memo.timeStamp,
              'nonceStr': res.memo.nonceStr,
              'package': res.memo.package,
              'signType': res.memo.signType,
              'paySign': res.memo.paySign
            },
            function (wxres) {
              if (wxres.err_msg === 'get_brand_wcpay_request:ok') {
                that.$router.push('/paidsucc/' + price)
              } else if (wxres.err_msg === 'get_brand_wcpay_request:cancel') {
                Toast({
                  message: '已取消支付',
                  position: 'bottom',
                  duration: 1500
                })
              } else {
                Toast({
                  message: '支付失败',
                  position: 'bottom',
                  duration: 1500
                })
              }
            }
          )
        },
        cbError (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    gofeed () {
      this.$router.push('/users/feedback')
    },
    aloseSel () {
      this.isKefu = false
    },
    goOrder () {
      let students = []
      for (let i in this.items) {
        if (this.items[i].isshow === true) {
          students.push(this.items[i].id)
        }
      }
      let that = this
      g.ajax({
        path: 'courseorders/add',
        data: {
          students: students,
          gid: that.$route.params.gid
        },
        methods: 'post',
        cbSuccess (data) {
          that.orderno = data.memo.order_no
          that.isKefu = true
        },
        cbError (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    edit () {
      let that = this
      g.ajax({
        path: 'coursestudents/update',
        data: this.message,
        cbSuccess () {
          that.isAdd = false
        },
        cbError (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    addLook (val, id) {
      this.id = id
      if (val === 0) {
        this.title = '修改"我"的报名信息'
      } else {
        this.title = '查看参加人'
      }
      this.isAdd = true
      this.message = this.items[val]
    },
    getinfo () {
      let that = this
      this.$g.ajax({
        path: 'courses/getinfo/' + this.$route.params.id,
        method: 'post',
        data: that.searchmsg,
        cbSuccess: function (data) {
          that.alllist = data.memo
        },
        cbError: function (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
    },
    getUser () {
      let that = this
      g.ajax({
        path: 'coursestudents/index',
        data: {
        },
        cbSuccess (data) {
          that.items = data.memo
          if (data.memo.length === 0 || data.memo === []) {
            that.isAdd = true
          } else {
            that.fid = that.items[0].id
          }
          that.num = that.items.length
          for (let i in that.items) {
            that.items[i].isshow = true
          }
        },
        cbError (data) {
          let msg = msgbox.get(data.msg)
          console.log(msg)
        }
      })
    },
    addCol (val) {
      this.items[val].isshow = !this.items[val].isshow
      let aa = []
      for (let i in this.items) {
        if (this.items[i].isshow === true) {
          aa.push(true)
        }
      }
      this.num = aa.length
    },
    del () {
      let that = this
      MessageBox.confirm('你确定要删除吗？?').then(action => {
        g.ajax({
          path: 'coursestudents/delete/' + that.id,
          data: that.message,
          cbSuccess () {
            for (let i in that.items) {
              if (parseInt(that.items[i].id) === parseInt(that.id)) {
                that.items.splice(i, 1)
              }
            }
            that.isAdd = false
          },
          cbError (data) {
            let msg = msgbox.get(data.msg)
            Toast({
              message: msg,
              position: 'bottom',
              duration: 1000
            })
          }
        })
      }, Promise => {
        console.log('小笨蛋')
      })
    },
    addNum () {
      this.isAdd = true
      this.title = '新增参加人'
      this.message = {}
      this.id = ''
    },
    sure () {
      if (this.message.customer === '') {
        Toast({
          message: '姓名不能为空'
        })
        return false
      }
      if (this.message.phone === '') {
        Toast({
          message: '手机不能为空'
        })
        return false
      }
      if (this.message.company === '') {
        Toast({
          message: '公司不能为空'
        })
        return false
      }
      if (this.message.phone !== '') {
        let phonedata = [
          {//  验证手机
            val: this.message.phone,
            rules: {//  规则
              mobile: {
                msg: msgbox.get('MobileError')
              }
            }
          }
        ]
        let ress = g.verify.check(phonedata)
        if (ress !== true) {
          Toast({
            message: ress
          })
          return false
        }
        for (let i in this.items) {
          if (this.items[i].phone.indexOf(this.message.phone) > -1) {
            Toast({
              message: '手机号已存在'
            })
            return false
          }
        }
      }
      let that = this
      g.ajax({
        path: 'coursestudents/add',
        data: that.message,
        cbSuccess (data) {
          that.id = data.memo.id
          that.items.push({
            customer: that.message.customer,
            phone: that.message.phone,
            company: that.message.company,
            position: that.message.position,
            isshow: true,
            id: data.memo.id
          })
          that.message = {}
          that.isAdd = false
        },
        cbError (data) {
          let msg = msgbox.get(data.msg)
          Toast({
            message: msg,
            position: 'bottom',
            duration: 1000
          })
        }
      })
      this.num += 1
    },
    close () {
      this.isAdd = false
      // sessionStorage.removeItem('queryParam')
    }
  }
}
</script>

<style scoped lang="scss">
.sign-all{
  width: 100%;
  background: rgba(244,244,244,0.8);
  height: 100%;
  /*padding: 0 3%;*/
}
  .main-view{
    width: 97%;
    height: 100px;
    background: white;
    img{
      width: 80px;
      height: 80px;
      float: left;
      margin-top: 10px;
      margin-left: 3%;
    }
    .title{
      font-size: 13px;
      color: #333;
      float: left;
      margin-left: 20px;
      width: 64%;
      margin-top: 10px;
      span:nth-of-type(1){
        display: inline-block;
        float: left;
        line-height: 30px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 14px;
      }
      span:nth-of-type(2){
        display: inline-block;
        float: left;
        line-height: 16px;
        width: 100%;
        color: #999999;
        word-wrap:break-word;
        word-break:break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        height: 50px;
        font-size: 12px;
      }
    }
  }
  .main-num{
    width: 96%;
    margin-left: 3%;
    .sign-title{
      margin-top: 20px;
      span:nth-of-type(1){
        color: #0033a0;
        font-size: 17px;
        font-weight: 700;
      }
      span:nth-of-type(2){
        float: right;
        padding-right: 3%;
        font-size: 16px;
      }
    }
    ul{
      margin-top: 20px;
    }
    li{
      width: 20%;
      display: inline-block;
      float: left;
      border: 1px solid #999999;
      height: 20px;
      margin-bottom: 20px;
      margin-right: 5%;
      border-radius: 5px;
      font-size: 12px;
      color: #383838;
      text-align: center;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .active{
      border-color: #0033a0;
      color: #0033a3;
      position: relative;
      img{
        position: absolute;
        right: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
      }
    }
    li:nth-of-type(4n){
      margin-right: 0;
    }
  }
  .main-btn{
    height: 30px;
    width: 96%;
    border: 1px solid rgba(0,41,160,0.4);
    border-radius: 5px;
    margin-top: 10px;
    color: #0033a3;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    vert-align: middle;
    i{
      font-size: 14px;
    }
  }
  .main-new{
    width: 100%;
    height: 100%;
    background: rgba(178,178,178,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    .main-new-one{
      width: 70%;
      height: 240px;
      background: white;
      margin: auto;
      margin-top: 40%;
      padding: 20px 5%;
      line-height: 20px;
      border-radius: 5px;
      .title{
        text-align: center;
        margin-bottom: 10px;
      }
      .main-inp{
        background: #f9f9f9;
        width: 100%;
        line-height: 30px;
        font-size: 14px;
        height: 30px;
        span{
          padding-left: 10px;
        }
        input{
          border: none;
          outline: none;
          width: 65%;
          background: none;
          font-size: 14px;
        }
        input::placeholder{
          font-size: 14px;
        }
        i{
          font-size: 12px;
        }
      }
      .new-btn-1{
        span{
          width: 33.3%!important;
        }
      }
      .new-btn{
        margin-top: 20px;
        span{
          display: inline-block;
          width: 50%;
          float: left;
          line-height: 40px;
          text-align: center;
          color: #0033a3;
        }
      }
    }
  }
  .sign-view{
    width: 96%;
    margin-bottom: 20px;
    background: white;
    height: 80px;
    position: relative;
    i{
      position: absolute;
      color: #f87585;
      left: -5px;
      top: -5px;
    }
    .v-img{
      width: 50px;
      height: 50px;
      margin-top: 14px;
      margin-left: 15px;
      border-radius: 50%;
      background: #cbddfe;
      float: left;
      text-align: center;
      line-height: 50px;
      color: #999999;
    }
    .v-name{
      margin-top: 15px;
      width: 55%;
      float: left;
      margin-left: 15px;
      line-height: 25px;
      font-size: 13px;
    }
    .look{
      float: right;
      line-height: 80px;
      color: #0033a3;
      font-size: 14px;
      margin-right: 15px;
    }
  }
  .s-foot{
    font-size: 12px;
    color: #999999;
    margin-top: 10px;
    width: 96%;
    padding-right: 3%;
  }
.tab-ber-bottom {
  height: 48px;
}
.tab-ber {
  height: 48px;
  border-top:1px solid #eee;
  background:#ffffff;
  color:#999999;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .tab-once{
    width: 30%!important;
    border: none!important;
    padding-right: 0!important;
    span{
      width: 100%;
      background: #0033a3;
      color: white;
      height: 48px;
      display: inline-block;
      line-height: 48px;
      font-size: 16px!important;
      text-align: center;
    }
  }
  .tab-ber-once {
    width: 70%;
    height: 48px;
    float: left;
    text-align: right;
    box-sizing: border-box;
    border-right: 1px solid #eee;
    line-height: 48px;
    font-size: 14px;
    color: #0033a3;
    padding-right: 10px;
    i{
      display: inline-block;
      margin-top: 5px;
    }
    span {
      font-size: 12px;
    }
  }
  .fontColor {
    color: #0033a0;
  }
}
.tips{
  text-align: center;
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #d4d8d8;
}
.feedback{
  text-align: right;
  font-size: 12px;
  margin-right: 14px;
  color: #ababab;
}
.main-kefu{
  width: 100%;
  height: 100%;
  background: rgba(178,178,178,0.6);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  text-align: center;
  .main-more{
    width: 100%;
    background: white;
    min-height: 100px;
    position: absolute;
    bottom: 0;
    .mbtn{
      width: 94%;
      line-height: 40px;
      border-radius: 5px;
      float: left;
      margin-left: 3%;
      margin-bottom: 10px;
      color: white;
      background: #0033a0;
      font-size: 13px;
      margin-top: 20px;
    }
    .title{
      margin-top: 15px;
      position: relative;
      padding: 0 3%;
      span:nth-of-type(1){
        font-weight: 700;
        font-size: 16px;
      }
      span:nth-of-type(2){
        font-size: 12px;
        color: #666;
      }
      span:nth-of-type(3){
        position: absolute;
        right: 3%;
        top: 0;
        color: #666;
        font-size: 14px;
      }
    }
    .mimg{
      margin-top: 10px;
      img{
        float: left;
        margin-left: 3%;
      }
      span{
        float: right;
        margin-right: 3%;
        color: #0033a0;
        line-height: 30px;
        font-size: 20px;
      }
    }
  }
  i{
    font-size: 40px;
    color: white;
    line-height: 60px;
  }
}
</style>
<style>
  #bodystyle{
    height: 100%;
    overflow: hidden;
  }
</style>
